<template>
	<view>
		<!-- 使用 common-title 组件 -->
		<view class="title-bar">
			<common-title :title="pageTitle" :showBack="true"></common-title>


			<view class="view-record">

				<image :src="currentImage" class="img-record" :class="{ animate: isStartRecordRef }"
					@click="startOrStopRecord">
				</image>
				<view class="v-record-text">{{recordTipsRef}}</view>
			</view>

		</view>




	</view>
</template>


<script setup>
	import * as httpConfig from "../../common/http-config.js";
	import * as DataUtils from "../../utils/DataUtils";
	import CommonTitle from '@/components/common-title.vue';
	import SelectBed from '@/components/select-bed.vue';
	import * as UploadUtils from '../../utils/UploadUtils.js';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted,
		onUnmounted,
		getCurrentInstance,
		computed,
		watch,
		defineComponent,
		reactive
	} from 'vue'
	// 使用 onMounted 钩子

	// 获取当前组件实例
	const instance = getCurrentInstance()
	// 初始化信息
	const initInfo = ref(null)

	onMounted(() => {
		console.log("组件已经挂载了.......")
		if (instance?.proxy?.$globalData?.initInfo) {
			let jsonStr = instance.proxy.$globalData.initInfo;
			console.log("onMounted jsonStr = " + jsonStr)
			initInfo.value = JSON.parse(jsonStr)
			console.log("onMounted initInfo = " + initInfo.value)
		}


	});
	// 使用 onUnmounted 钩子
	onUnmounted(() => {
		console.log("组件移除了.......")


	});

	const pageTitle = ref("实时广播")
	const isStartRecordRef = ref(false)
	const startImage = ref("/static/image_record_start.png")
	const stopImage = ref("/static/image_record_end.png")
	const currentImage = ref("/static/image_record_end.png")
	const recordPathRef = ref("")
	const recordTipsRef = ref("请用手柄或靠近管理机后，点击话筒开始录音")
	const recordTime = ref(0)
	const startOrStopRecord = () => {
		console.log("startOrStopRecord")
		if (isStartRecordRef.value) {
			stopRecord()
		} else {
			startRecord()
		}

	}

	const startRecord = () => {

		console.log("startRecord")
		recordPathRef.value = ""
		
		currentImage.value = startImage.value
		isStartRecordRef.value = true;


	}

	const stopRecord = () => {
		recordTipsRef.value = "请用手柄或靠近管理机后，点击话筒开始录音"
		console.log("stopRecord")
		recordPathRef.value = ""
		currentImage.value = stopImage.value
		isStartRecordRef.value = false;
	}
</script>


<style lang="less" scoped>
	@vw: 8.015vw;
	@vh: 5.4vh;

	.view-record {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 400/@vh;

		.img-record {
			width: 120/@vw;
			height: 120/@vh;
		}

		.v-record-text {
			margin-top: 10/@vh;
			color: #586F93;
			font-size: 9/@vh;
		}

	}




	/* 定义动画 */
	.animate {
		animation: scaleAnimation 2s infinite;
	}

	@keyframes scaleAnimation {
		0% {
			transform: translate(-50%, -50%) scale(1);
			/* 保持居中并缩放 */
		}

		50% {
			transform: translate(-50%, -50%) scale(0.8);
			/* 保持居中并缩放 */
		}

		100% {
			transform: translate(-50%, -50%) scale(1);
			/* 保持居中并缩放 */
		}
	}

	/* 定义动画 */
	.animate2 {
		animation: scaleAndFade 1.5s infinite linear;
		/* linear 表示匀速 */
	}

	@keyframes scaleAndFade {
		0% {
			transform: translate(-50%, -50%) scale(1);
			/* 初始大小 */
			opacity: 1;
			/* 完全不透明 */
		}

		50% {
			transform: translate(-50%, -50%) scale(1.5);
			/* 放大到 1.2 倍 */
			opacity: 0.3;
			/* 半透明 */
		}

		100% {
			transform: translate(-50%, -50%) scale(1.2);
			/* 保持 1.2 倍 */
			opacity: 0;
			/* 完全透明 */
		}
	}



	::v-deep.uni-forms-item__label {
		color: #2C2E30;
		font-size: 13/@vh;
	}

	::v-deep.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
		font-size: 13/@vh;
		color: #2C2E30;
	}



	// 输入框
	::v-deep.uni-easyinput__content-input {

		height: 34/@vh;
		font-size: 13/@vh;
		color: #2C2E30;
	}

	::v-deep.uni-easyinput__placeholder-class {
		font-size: 13/@vh;

	}

	::v-deep.uni-select {
		height: 36/@vh;
		font-size: 13/@vh;
		color: #2C2E30;
	}

	::v-deep.uni-select__selector-item {
		font-size: 13/@vh !important;
	}

	::v-deep.uni-icons {
		font-size: 20/@vh !important;
	}

	::v-deep.uni-select__input-placeholder {
		font-size: 13/@vh !important;
		color: #999;
	}

	::v-deep.uni-forms-item__label {
		width: 90/@vw !important;
	}

	::v-deep.uni-forms-item {
		margin: 0;
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	::v-deep.uni-easyinput__content-textarea {
		height: 90/@vh ;
		font-size: 13/@vh;
		color: #2C2E30;
		min-height: 0px;

	}

	::v-deep.uni-drawer__content {
		width: 340/@vw !important;
	}

	::v-deep.uni-select__input-placeholder {
		font-size: 13/@vh !important;
	}

	::v-deep.uni-date__x-input {
		font-size: 13/@vh !important;
		height: 34/@vh;
		line-height: 34/@vh;
	}

	::v-deep.uni-date-x {
		color: #2C2E30;
	}
</style>